<template>
  <div class="ba_f outerLayer">
    <div class="sellback" id="box">
      <div class="login_wrap">
        <div class="warp_content">
          <div class="title">
            <h3>商家管理后台登录</h3>
            <span class="txt"></span>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0"
                   class="demo-ruleForm">
            <div class="formInfo">
              <div class="formText">
                <el-form-item prop="userName">
                  <el-input  prefix-icon="iconfont iconzhanghao mar_l5" v-model="ruleForm.userName" autocomplete="off"
                            placeholder="请输入登录账号"  style="width: 300px;"></el-input>
                </el-form-item>
              </div>
              <div class="formText">
                <el-form-item prop="passWord">
                  <el-input  prefix-icon="iconfont iconmima mar_l5" v-model="ruleForm.passWord" autocomplete="off" type="password"
                            placeholder="请输入密码"  style="width: 300px;"></el-input>
                </el-form-item>
              </div>
              <div class="formText">
                <el-form-item prop="passWord">
                  <el-input  prefix-icon="iconfont iconmima mar_l5" v-model="ruleForm.passWord" autocomplete="off" type="password"
                            placeholder="请输入图形验证码"  style="width: 300px;"></el-input>
                </el-form-item>
              </div>
              <!-- <div class="flex-r-ac">
                <div class="flex-r-ac">
                  <p class="list-item">
                    <div class="form-inline-input">
                      <div class="code-box" id="code-box">
                        <input type="text" name="code" class="code-input" v-model="graphical"/>
                        <p></p>
                        <span>>>></span>
                      </div>
                    </div>
                  </p>
                </div>
              </div> -->

        <div class="formText submitDiv">
                        <span class="submit_span">
                             <el-button type="primary" style="width: 300px;" @click="submitForm(ruleForm)">登录</el-button>
                        </span>
              </div>
              <div class="passwordText">
                <div class="passwordl">
                  <!--<input type="checkbox" class="check" id="checkbox"/>-->
                  <!--<label for="checkbox">记住密码</label>-->
                </div>
<!--                <div class="passwordr"><a href="#">忘记密码</a> | <a href="#">注册</a></div>-->
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { htLoginin } from "@/api/setup";
import "../../assets/css/loginysw.css";
export default {
  mounted() {
    var _this = this;
    //code是后台传入的验证字符串
    var code = "jsaidaisd656",
      codeFn = _this.moveCode(code, _this);
  },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        setTimeout(() => {
          callback();
        }, 1000);
      }
    };
    return {
      ruleForm: {
        userName: "",
        passWord: ""
      },
      rules: {
        userName: [{ validator: checkTel, trigger: "blur" }],
        passWord: [{ validator: validatePass, trigger: "blur" }]
      },
      graphical: ""
    };
  },
  methods: {
    async submitForm(formName) {
      const { msg, code } = await htLoginin(this.ruleForm);
      this.$baseMessage(msg, "success");
      if (code == "1") {
        this.$router.push({ path: "/storesurvey" });
      }
    }
    // async submitForm(formName) {
    //   var boxt = document.querySelector("#code-box"),
    //     codeInputt = box.querySelector(".code-input");
    //   if (formName.userName && formName.passWord) {
    //     if (!codeInputt.value) {
    //       return this.$message({
    //         message: "请滑动图形验证！",
    //         type: "error",
    //         offset: "200",
    //         duration: 1000
    //       });
    //     } else {
    //       const { msg, code } = await htLoginin(this.ruleForm);
    //       this.$baseMessage(msg, "success");
    //       if (code == "1") {
    //         this.$router.push({ path: "/storesurvey" });
    //       }
    //     }
    //   }
    // },
    // //获取元素距离页面边缘的距离
    // getOffset(box, direction) {
    //   var setDirection = direction == "top" ? "offsetTop" : "offsetLeft";
    //   var offset = box[setDirection];
    //   var parentBox = box.offsetParent;
    //   while (parentBox) {
    //     offset += parentBox[setDirection];
    //     parentBox = parentBox.offsetParent;
    //   }
    //   parentBox = null;
    //   return parseInt(offset);
    // },
    // moveCode(code, _this) {
    //   var fn = { codeVluae: code };
    //   var box = document.querySelector("#code-box"),
    //     progress = box.querySelector("p"),
    //     codeInput = box.querySelector(".code-input"),
    //     evenBox = box.querySelector("span");
    //   //默认事件
    //   var boxEven = ["mousedown", "mousemove", "mouseup"];
    //   //改变手机端与pc事件类型
    //   if (typeof document.ontouchstart == "object") {
    //     boxEven = ["touchstart", "touchmove", "touchend"];
    //   }
    //   var goX, offsetLeft, deviation, evenWidth, endX;
    //   function moveFn(e) {
    //     e.preventDefault();
    //     e = boxEven["0"] == "touchstart" ? e.touches[0] : e || window.event;
    //     endX = e.clientX - goX;
    //     endX = endX > 0 ? (endX > evenWidth ? evenWidth : endX) : 0;
    //     if (endX > evenWidth * 0.7) {
    //       progress.innerText = "松开验证";
    //       progress.style.backgroundColor = "#66CC66";
    //     } else {
    //       progress.innerText = "";
    //       progress.style.backgroundColor = "#FFFF99";
    //     }
    //     progress.style.width = endX + deviation + "px";
    //     evenBox.style.left = endX + "px";
    //   }
    //   function removeFn() {
    //     document.removeEventListener(boxEven["2"], removeFn, false);
    //     document.removeEventListener(boxEven["1"], moveFn, false);
    //     if (endX > evenWidth * 0.7) {
    //       progress.innerText = "验证成功";
    //       progress.style.width = evenWidth + deviation + "px";
    //       evenBox.style.left = evenWidth + "px";
    //       codeInput.value = fn.codeVluae;
    //       evenBox.onmousedown = null;
    //       // _this.ruleForm.verification = true;
    //     } else {
    //       progress.style.width = "0px";
    //       evenBox.style.left = "0px";
    //     }
    //   }
    //   function getOffset(box, direction) {
    //     var setDirection = direction == "top" ? "offsetTop" : "offsetLeft";
    //     var offset = box[setDirection];
    //     var parentBox = box.offsetParent;
    //     while (parentBox) {
    //       offset += parentBox[setDirection];
    //       parentBox = parentBox.offsetParent;
    //     }
    //     parentBox = null;
    //     return parseInt(offset);
    //   }
    //   evenBox.addEventListener(
    //     boxEven["0"],
    //     function(e) {
    //       e = boxEven["0"] == "touchstart" ? e.touches[0] : e || window.event;
    //       (goX = e.clientX),
    //         (offsetLeft = getOffset(box, "left")),
    //         (deviation = this.clientWidth),
    //         (evenWidth = box.clientWidth - deviation),
    //         endX;
    //       document.addEventListener(boxEven["1"], moveFn, false);
    //       document.addEventListener(boxEven["2"], removeFn, false);
    //     },
    //     false
    //   );
    //   fn.setCode = function(code) {
    //     if (code) fn.codeVluae = code;
    //   };
    //   fn.getCode = function() {
    //     return fn.codeVluae;
    //   };
    //   fn.resetCode = function() {
    //     evenBox.removeAttribute("style");
    //     progress.removeAttribute("style");
    //     codeInput.value = "";
    //   };
    //   return fn;
    // }
  }
};
</script>
<style lang="scss" scoped>
.login_wrap {
  width: 420px;
  background: #fff;
  border-radius: 5px;
}
.el-input--prefix .el-input__inner {
  padding-left: 35px;
}
.outerLayer {
  width: 100%;
  height: 100%;
  background: url(../../assets/public/login_bg2.png) no-repeat 0% 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: center;
}

.sellback {
  width: 420px;
  height: 430px;
  margin: 10% auto 0 auto;
  background-color: #fff;
  border-radius: 10px;
}

.warp_content {
  width: 300px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}

.warp_content .title {
  margin-top: 10px;
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.warp_content .title h3 {
  font-size: 20px;
  color: #333;
  line-height: 32px;
}

.formInfo {
  margin-top: 30px;
  overflow: hidden;
}

.formInfo .formText {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.formInfo .formText .input-text {
  border: 0;
  height: 42px;
  padding: 6px 28px 6px 18px;
  width: 340px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.formInfo .formText input:focus {
  outline: none;
  box-shadow: none;
}

.formInfo .formText .login-icon {
  position: absolute;
  top: 9px;
  left: 18px;
  width: 14px;
  height: 13px;
  z-index: 9;
  border-right: 1px solid #e3e4e8;
  height: 30px;
  width: 30px;
}

.formInfo .submitDiv {
  font-size: 0;
  padding-top: 20px;
}

/*.formInfo .submitDiv .sub {*/
/*width: 135px;*/
/*height: 44px;*/
/*border: 0;*/
/*background: linear-gradient(10deg, rgba(253, 85, 0, 1) 0%, rgba(253, 85, 0, 1) 100%);*/
/*color: #FFF;*/
/*padding: 0;*/
/*font-size: 16px;*/
/*cursor: pointer;*/
/*font-family: "Microsoft YaHei";*/
/*}*/

/*.formInfo .submitDiv .qp_sub {*/
/*width: 100%;*/
/*border-radius: 5px;*/
/*}*/

.passwordText {
  height: 20px;
  line-height: 20px;
}

.passwordl {
  float: left;
  height: 20px;
  line-height: 20px;
}

.passwordl .check {
  width: 17px;
  height: 17px;
  border: 1px solid #d4d4d4;
  background-color: #fff;
}

.passwordl label {
  margin-top: -10px;
  margin-left: 3px;
}

.passwordr {
  float: right;
  color: #999;
}

.passwordr a {
  font-size: 14px;
  color: #999;
  margin: 0 5px;
}
</style>
